<template>
    <div class="container box">
        <!-- 查询表单 -->
        <div class="search_form" ref="searchCard">
            <el-form :inline="true" size="mini" :model="searchForm">
                <el-form-item>
                    <el-input v-model="searchForm.accNo" clearable style="background-color: #FFFFFF" placeholder="用户账号" @input="searchForm.accNo=verifyfilter('spaceChar',searchForm.accNo)"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchForm.userName" clearable style="background-color: #FFFFFF" placeholder="用户名称" @input="searchForm.userName=verifyfilter('spaceChar',searchForm.userName)"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-cascader placeholder="公司部门" :options="companyTree" :props="optionProps" change-on-select ref="cascaderRefs" @change="searchcasChange(searchFormDeptCode)" v-model="searchFormDeptCode"  clearable></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-select size="mini" filterable clearable placeholder="岗位" v-model="searchForm.deptPost" class="others">
                        <el-option v-for="item in deptPostData" :key="item.id" :label="item.postName" :value="item.postCode" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchClick">查询</el-button>
                </el-form-item>
            </el-form>
           <el-button v-hasPermi="['system:user:insert']" size="mini" type="primary" icon="el-icon-plus" @click="increase()">新建</el-button>
        </div>

        <!-- 表格 -->
        <template>
            <BaseTable :data="cargotableData" :columns="cargotableDataColumns" :tableHeight="tableHeight" :pagination="false" :loading="loading"></BaseTable>
        </template>

        <div class="page">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryInfo.page" :page-sizes="[10, 15, 30, 45]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="queryInfo.totalNum"></el-pagination>
        </div>
        <!-- 修改用户对话框 -->
        <el-drawer :visible.sync="editOrAdd" :direction="direction" title="修改用户信息" :before-close="handleClose" size="40%">
            <el-tabs v-model="activeName" @tab-click="handleTabsClick">
                <el-tab-pane label="修改用户信息" name="first" :disabled="editUserFlag">
                    <div class="demo-drawer__content">
                        <el-col :span="12">
                            <el-form ref="userForm" :model="editForm" :rules="userRules" label-width="90px" style="margin-bottom: 80px;padding-top: 20px;">
                                <el-form-item label="登录账号:" prop="accNo">
                                    <el-input ref="loginUser" v-model="editForm.accNo" @input="editForm.accNo=verifyfilter('char',editForm.accNo)" disabled></el-input>
                                </el-form-item>
<!--                                <el-form-item label="密码:" required class="form_item">
                                    <el-input @change="isMd(editForm.password)" ref="password" type="password" prefix-icon="el-icon-unlock" clearable v-model="editForm.password" @input="deptChange"></el-input>
                                </el-form-item>-->
                                <el-form-item label="用户名称:" prop="userName" class="form_item">
                                    <el-input v-model="editForm.userName" @input="editForm.userName=verifyfilter('char',editForm.userName)"></el-input>
                                </el-form-item>
                                <el-form-item label="用户工号:" prop="userNo" class="form_item">
                                    <el-input disabled v-model="editForm.userNo" @input="editForm.userNo = verifyfilter('char#', editForm.userNo)"></el-input>
                                </el-form-item>
                                <el-form-item label="用户类型:" prop="userType" class="form_item">
                                    <el-select v-model="editForm.userType" placeholder filterable style="width:100%">
                                        <el-option v-for="item in userTypeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
                                        <!-- <el-option label="外部用户" value="01"></el-option> -->
                                    </el-select>
                                </el-form-item>
<!--                                <el-form-item label="证件类型:" prop="cardType" class="form_item">
                                    <el-select v-model="editForm.cardType" placeholder filterable style="width:100%">
                                        <el-option v-for="item in cardTypeData" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="证件号:" prop="card" class="form_item">
                                    <el-input v-model="editForm.card" @input="editForm.card=verifyfilter('char',editForm.card)"></el-input>
                                </el-form-item>-->
                                <el-form-item label="部门" prop="deptId" class="form_item">
                                    <el-cascader placeholder="部门" :options="companyTree" :props="optionProps" change-on-select ref="cascaderEdit" @change="casChange1(deptId,false)" v-model="deptId" filterable style="width:100%"></el-cascader>
                                </el-form-item>

                                <el-form-item label="岗位:" prop="deptPost" class="form_item">
                                    <el-select v-model="editForm.deptPost" clearable filterable style="width:100%">
                                        <el-option v-for="item in deptPostData" :key="item.id" :label="item.postName" :value="item.postCode" />
                                    </el-select>
                                </el-form-item>
<!--                                <el-form-item label="邮箱:" prop="email" class="form_item">
                                    <el-input v-model="editForm.email"></el-input>
                                </el-form-item>-->
                                <el-form-item label="状态:" prop="delFlag" class="form_item">
                                    <el-switch v-model="editForm.delFlag" active-value="0" inactive-value="1" active-text="启用" inactive-text="停用"></el-switch>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="12">
                            <div class="right_title" style="padding:0 20px;">角色列表<el-button size="mini" class="expandClass" type="primary" @click="treeExpandOpen('treeExpandEdit')">展开所有</el-button>
                                <el-button size="mini" class="expandClass" type="primary" @click="treeExpandClose('treeExpandEdit')">关闭所有</el-button>
                            </div>
                            <!-- 树形控件 -->
                            <el-tree :data="rightsList" :props="treeProps" show-checkbox :default-expand-all="treeExpandEdit" :key="treeExpandEditKey" node-key="id" ref="ruleTree" :default-checked-keys="defkey" style="padding:0 20px;background-color: #F5F7FA"></el-tree>
                        </el-col>
                    </div>
                    <div class="userBtn">
                        <el-button size="small" type="primary" @click="enterUser">保 存</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="修改劳务人员" name="second" :disabled="editPersonFlag">
                    <el-form ref="userForm" :model="editForm" :rules="userRules" label-width="90px" style="padding:0 20px;">
                        <el-form-item label="用户名称:" prop="userName" class="form_item">
                            <el-input v-model="editForm.userName" @input="editForm.userName=verifyfilter('char',editForm.userName)"></el-input>
                        </el-form-item>
                        <el-form-item label="用户工号:" prop="userNo" class="form_item">
                            <el-input disabled v-model="editForm.userNo" @input="editForm.userNo = verifyfilter('char#', editForm.userNo)"></el-input>
                        </el-form-item>
                        <el-form-item label="用户类型:" prop="userType" class="form_item">
                            <el-select v-model="editForm.userType" placeholder filterable style="width:100%">
                                <el-option v-for="item in userTypeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
                            </el-select>
                        </el-form-item>
<!--                        <el-form-item label="证件类型:" prop="cardType" class="form_item">
                            <el-select v-model="editForm.cardType" placeholder filterable style="width:100%">
                                <el-option v-for="item in cardTypeData" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="证件号:" prop="card" class="form_item">
                            <el-input v-model="editForm.card" @input="editForm.card=verifyfilter('char',editForm.card)"></el-input>
                        </el-form-item>-->
                        <el-form-item label="部门" class="form_item" prop="deptId">
                            <el-cascader placeholder="部门" :options="companyTree" :props="optionProps" change-on-select ref="cascaderEdit" @change="casChange1(deptId,false)" v-model="deptId" filterable style="width:100%"></el-cascader>
                        </el-form-item>

                        <el-form-item label="岗位:" prop="deptPost" class="form_item">
                            <el-select v-model="editForm.deptPost" filterable style="width:100%">
                                <el-option v-for="item in deptPostData" :key="item.id" :label="item.postName" :value="item.postCode" />
                            </el-select>
                        </el-form-item>
<!--                        <el-form-item label="邮箱:" prop="email" class="form_item">
                            <el-input v-model="editForm.email"></el-input>
                        </el-form-item>-->
                        <el-form-item label="状态:" prop="delFlag" class="form_item">
                            <el-switch v-model="editForm.delFlag" active-value="0" inactive-value="1" active-text="启用" inactive-text="停用"></el-switch>
                        </el-form-item>
                    </el-form>
                    <div class="userBtn">
                        <el-button size="small" type="primary" @click="editPersonSave">保 存</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-drawer>

        <el-drawer :visible.sync="addDrawer" :direction="direction" :before-close="handleClose" size="40%">
            <el-tabs v-model="activeName" @tab-click="handleTabsClick">
                <el-tab-pane label="新增用户信息" name="first">
                    <div class="demo-drawer__content">
                        <el-col :span="12">
                            <el-form ref="addFormRefs" :model="addForm" :rules="userRules" label-width="90px" style="padding-top: 20px;">
                                <el-form-item label="登录账号:" prop="accNo">
                                    <el-input ref="loginUser" v-model="addForm.accNo" @input="addForm.accNo=verifyfilter('char',addForm.accNo)"></el-input>
                                </el-form-item>
<!--                                <el-form-item label="密码:" prop="password" class="form_item">
                                    <el-input ref="password" show-password clearable v-model="addForm.password"></el-input>
                                </el-form-item>-->
                                <el-form-item label="用户名称:" prop="userName" class="form_item">
                                    <el-input v-model="addForm.userName" @input="addForm.userName=verifyfilter('char',addForm.userName)"></el-input>
                                </el-form-item>
                                <el-form-item label="用户工号:" prop="userNo" class="form_item">
                                    <el-input v-model="addForm.userNo" @input="addForm.userNo = verifyfilter('char#', addForm.userNo)"></el-input>
                                </el-form-item>
                                <el-form-item label="用户类型:" prop="userType" class="form_item">
                                    <el-select v-model="addForm.userType" placeholder filterable style="width:100%">
                                        <el-option v-for="item in userTypeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
                                    </el-select>
                                </el-form-item>
<!--                                <el-form-item label="证件类型:" prop="cardType" class="form_item">
                                    <el-select v-model="addForm.cardType" placeholder filterable style="width:100%">
                                        <el-option v-for="item in cardTypeData" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="证件号:" prop="card" class="form_item">
                                    <el-input v-model="addForm.card" @input="addForm.card=verifyfilter('char',addForm.card)"></el-input>
                                </el-form-item>-->

                                <el-form-item label="部门" class="form_item" prop="deptId">
                                    <el-cascader placeholder="部门" :options="companyTree" :props="optionProps" change-on-select ref="cascader" @change="casChange2(addForm.deptId,true)" v-model="addForm.deptId" filterable style="width:100%"></el-cascader>
                                </el-form-item>
                                <el-form-item label="岗位:" prop="deptPost" class="form_item">
                                    <el-select v-model="addForm.deptPost" clearable filterable style="width:100%">
                                        <el-option v-for="item in deptPostData" :key="item.id" :label="item.postName" :value="item.postCode" />
                                    </el-select>
                                </el-form-item>
<!--                                <el-form-item label="邮箱:" prop="email" class="form_item">
                                    <el-input v-model="addForm.email"></el-input>
                                </el-form-item>-->
                                <el-form-item label="状态:" prop="delFlag" class="form_item">
                                    <el-switch v-model="addForm.delFlag" active-value="0" inactive-value="1" active-text="启用" inactive-text="停用"></el-switch>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="12">
                            <div class="right_title" style="padding:0 20px;">角色列表<el-button size="mini" class="expandClass" type="primary" @click="treeExpandOpen('treeExpandAdd')">展开所有</el-button>
                                <el-button size="mini" class="expandClass" type="primary" @click="treeExpandClose('treeExpandAdd')">关闭所有</el-button>
                            </div>
                            <!-- 树形控件 -->
                            <el-tree :data="rightsList" :props="treeProps" :default-expand-all="treeExpandAdd" :key="treeExpandAddKey" show-checkbox node-key="id" ref="addRuleTree" :default-checked-keys="defkey" style="padding:0 0 50px 20px;background-color: #F5F7FA"></el-tree>
                        </el-col>
                        <div class="userBtn">
                            <el-button size="small" type="primary" @click="addUser">保 存</el-button>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="新增劳务人员" name="second">
                    <el-form ref="addForm" :model="addForm" :rules="userRules" label-width="90px" style="padding:0 20px;">
                        <el-form-item label="用户名称:" prop="userName" class="form_item">
                            <el-input v-model="addForm.userName" @input="addForm.userName=verifyfilter('char',addForm.userName)"></el-input>
                        </el-form-item>
                        <el-form-item label="用户工号:" prop="userNo" class="form_item">
                            <el-input v-model="addForm.userNo" @input="addForm.userNo=verifyfilter('char#',addForm.userNo)"></el-input>
                        </el-form-item>
                        <el-form-item label="用户类型:" prop="userType" class="form_item">
                            <el-select v-model="addForm.userType" placeholder filterable style="width:100%">
                                <el-option v-for="item in userTypeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
                            </el-select>
                        </el-form-item>
<!--                        <el-form-item label="证件类型:" prop="cardType" class="form_item">
                            <el-select v-model="addForm.cardType" placeholder filterable style="width:100%">
                                <el-option v-for="item in cardTypeData" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="证件号:" prop="card" class="form_item">
                            <el-input v-model="addForm.card" @input="addForm.card=verifyfilter('char',addForm.card)"></el-input>
                        </el-form-item>-->

                        <el-form-item label="部门" prop="dept" class="form_item">
                            <el-cascader placeholder="部门" :options="companyTree" :props="optionProps" change-on-select ref="cascader" @change="casChange2(addForm.deptId,true)" v-model="addForm.deptId" filterable style="width:100%"></el-cascader>
                        </el-form-item>
                        <el-form-item label="岗位:" prop="deptPost" class="form_item">
                            <el-select v-model="addForm.deptPost" filterable style="width:100%">
                                <el-option v-for="item in deptPostData" :key="item.id" :label="item.postName" :value="item.postCode" />
                            </el-select>
                        </el-form-item>
<!--                        <el-form-item label="邮箱:" prop="email" class="form_item">
                            <el-input v-model="addForm.email"></el-input>
                        </el-form-item>-->
                        <el-form-item label="状态:" prop="delFlag" class="form_item">
                            <el-switch v-model="addForm.delFlag" active-value="0" inactive-value="1" active-text="启用" inactive-text="停用"></el-switch>
                        </el-form-item>
                    </el-form>
                    <div class="userBtn">
                        <el-button size="small" type="primary" @click="addPerson">保 存</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-drawer>
        <el-drawer :visible.sync="templateShow" :direction="direction" title="配置模板信息" size="30%">
            <templateConfiguration v-if="templateShow" :userData='rowData' @templateConfigClose='templateShow = false'></templateConfiguration>
        </el-drawer>
        <el-drawer :visible.sync="supplyAccNoShow" :direction="direction" title="补充账号" size="30%">
            <supplyAccNo v-if="supplyAccNoShow" :userData='rowData' @supplyAccNoShowClose='supplyAccNoShowClose'></supplyAccNo>
        </el-drawer>
    </div>
</template>

<script>
    import BaseTable from '@/components/BaseTable'
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import Utils from '@/libs/Utils.js'
    import templateConfiguration from './subpage/templateConfiguration.vue'// 配置模板信息
    import supplyAccNo from './subpage/supplyAccNo' // 补充账号
    import { JSEncrypt } from 'jsencrypt'
    export default {
      components: {
        BaseTable,
        Treeselect,
        templateConfiguration,
        supplyAccNo
      },
      data() {
        // let phone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9])\d{8}$/
        const phone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        const isPhone = (rule, value, callback) => {
          if (!phone.test(value)) {
            return callback(new Error('请输入正确格式的手机号'))
          }
          callback()
        }
        const email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        const isEmail = (rule, value, callback) => {
          if (!value || value.length <= 0) callback()
          if (!email.test(value)) {
            return callback(new Error('请输入正确格式的邮箱地址'))
          }
          callback()
        }
        return {
          supplyAccNoShow: false, // 补充账号
          templateShow: false, // 模板配置打开
          rowData: {}, // 行数据
          searchFormDeptCode: [],
          menuArr: [],
          oldValA: {},
          oldValB: {},
          userTypeList: [],
          cargotableDataColumns: [
            { prop: 'accNo', label: '用户账号' },
            { prop: 'userName', label: '用户名称' },
            { prop: 'userNo', label: '用户工号' },
            {
              prop: 'userType',
              label: '用户类型',
              render: (h, params) => {
                return h(
                  'el-tag', {
                    props: {
                      type: params.row.userType === '00'
                        ? 'success' : 'primary',
                      size: 'mini'
                    }, // 组件的props
                    domProps: {
                      innerHTML: this.userTypeList.filter(el => el.dictValue == params.row.userType)[0].dictLabel
                    }
                  },
    
                )
              }
            },
            { prop: 'companyName', label: '公司', width: 250 },
            { prop: 'deptName', label: '部门' },
            { prop: 'postName', label: '岗位' },
            {
              prop: 'state',
              label: '状态',

              render(h, params) {
                if (params.row.state == '0') {
                  return h('el-tag', {
                    props: {
                      size: 'mini',
                      type: 'success'
                    },
                    domProps: {
                      innerHTML: '正常'
                    }
                  })
                }
                return h('el-tag', {
                  props: {
                    size: 'mini',
                    type: 'info'
                  },
                  domProps: {
                    innerHTML: '停用'
                  }
                })
              }
            },
            {
              label: '操作',
              fixed: 'right',
              align: 'center',
              width: 300,
              render: (h, params) => {
                return h('div', [
                  h('el-button', {
                    style: {
                    },
                    props: {
                      size: 'mini'
                    },
                    domProps: {
                      // 添加标签,使用自己引入的iconfont图标
                      innerHTML: "<span style='color:#9420A8'><i class='iconfont icon-dandiandenglu' style='color:#9420A8'></i>补充账号</i></span>"
                    },
                    on: {
                      click: () => {
                        if (!params.row.accNo) {
                          this.supplyAccNoShow = true // 打开补充账号
                          this.rowData = params.row
                        } else {
                          this.$message.error('用户账号已存在')
                        }
                      }
                    }
                  }),
                  /* h('el-button', {
                                    props: {
                                        size: 'mini',
                                    },
                                    domProps: {
                                        // 添加标签,使用自己引入的iconfont图标
                                        innerHTML: "<span style='color:#9420A8'><i class='iconfont icon-1-09' style='color:#9420A8'></i>模板配置</span>"
                                    },
                                    on: {
                                        click: () => {
                                            this.templateShow = true //打开模板配置
                                            this.rowData = params.row
                                        }
                                    }
                                }),*/
                  h('el-button', {
                    props: {
                      size: 'mini'
                    },

                    domProps: {
                      // 添加标签,使用自己引入的iconfont图标
                      innerHTML: `<span style='color:#0B6CD6;'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                    },
                    on: {
                      click: () => {
                        this.handleEdit(params.$index, params.row)
                      }
                    }
                  }),
                  h('el-button', {
                    props: {
                      size: 'mini'
                    },

                    domProps: {
                      // 添加标签,使用自己引入的iconfont图标
                      innerHTML: `<span style='color:#F75E5E;'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                    },
                    on: {
                      click: () => {
                        this.handleDelete(params.row)
                      }
                    }
                  })
                ])
              }
            }
          ],
          cargotableData: [],
          // tableHeight: window.innerHeight - 200,
          loading: false,
          popoverWidth: 0,
          searchid: '',
          inpDisable: true,
          dialogFormVisible: false,
          treeExpandAdd: true, // 默认展开
          treeExpandEdit: true, // 默认展开
          treeExpandEditKey: 0,
          treeExpandAddKey: 0,
          // 新增表单
          ruleForm: {
            user_no: '',
            user_name: ''
          },
          addDrawer: false,
          // 校验规则
          userRules: {
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
            ],
            accNo: [
              { required: true, message: '请输入手机号', trigger: 'blur' },
              { validator: isPhone }
            ],
            userName: [
              { required: true, message: '请输入用户姓名', trigger: 'blur' },
              { min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
            ],
            userNo: [
              { required: true, message: '请输入用户工号', trigger: 'blur' },
              { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
            ],
            cardType: [
              { required: false, message: '请选择证件类型', trigger: 'blur' }
            ],
            card: [
              { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
            ],
            company: [
              { required: true, message: '请选择所属公司', trigger: 'blur' }
            ],
            deptId: [{ required: true }],

            // deptPost: [
            //   { required: true, message: '请选择岗位', trigger: 'change' }
            // ],
            email: [{ validator: isEmail, trigger: 'blur' }],
            userType: [
              { required: true, message: '请选择用户类型', trigger: 'change' }
            ]
          },
          passwordmd: false,
          // 查询表单
          searchForm: {
            accNo: '',
            userName: '',
            deptCode: ''
          },

          drawTitle: '修改用户信息',
          // 编辑表单
          editForm: {
            accNo: '',
            userName: '',
            userNo: '',
            cardType: '01',
            card: '',
            company: '',
            dept: '',
            deptPost: '',
            email: '',
            delFlag: '0',
            userType: '',
            password: '',
            id: ''
          },
          // 表单
          addForm: {
            accNo: '',
            userName: '',
            userNo: '',
            cardType: '01',
            card: '',
            company: '',
            dept: '',
            deptPost: '',
            email: '',
            delFlag: '0',
            userType: '',
            password: '',
            id: '',
            deptId: []
          },
          optionProps: {
            value: 'id',
            label: 'name',
            children: 'children'
          },
          companyTree: [],
          deptId: '',
          // 表格
          tableData: [],
          // companyData: [], //公司列表
          cardTypeData: [], // 证件类型信息
          deptData: [], // 部门列表
          deptDataList: [], // 修改新增用户信息部门列表
          deptAddList: [], // 修改新增用户信息部门列表
          deptPostData: [], // 岗位列表
          // 抽屉数据
          editOrAdd: false, // 显示
          direction: 'rtl', // 方向

          // 菜单权限树形数据
          rightsList: [],
          // 树形控件的绑定对象
          treeProps: {
            children: 'children',
            label: 'name'
          },
          // 默认选中的节点数据
          defkey: [],

          // 角色列表数据
          queryInfo: {
            // 当前页数
            page: 1,
            // 每页显示多少数据
            pagesize: 10,
            totalNum: 1
          },
          activeName: 'first',
          editUserFlag: false,
          editPersonFlag: false,
          publicKey: 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDZo+eRHci5jxBX5Ia7UqFST41bWsPda7u243vdFLxpPxEMHHvZEb76Xv1dHuajiBWCbenG3nU8OgAqZAQxF+bid40mXs45+TZAEHPoHB9m6ICqWry/GRlftd22F+TZLrQURGlyRdBV5nM8rJ4qUOkwRdO+XEupIuhBdngJYzRTZwIDAQAB'
        }
      },
      computed: {
        tableHeight() {
          return this.$store.state.tableHeight
        }
      },
      methods: {
        // 关闭补充账号
        supplyAccNoShowClose() {
          this.supplyAccNoShow = false
          this.getUserDataList()
        },
        // 检验密码安全性函数
        checkpassword(accCount, password) {
          // 扩展Sting函数
          String.prototype.hashCode = function() {
            let hash = 0, i, chr;
            if (this.length === 0) return hash;
            for (i = 0; i < this.length; i++) {
              chr = this.charCodeAt(i);
              hash = ((hash << 5) - hash) + chr;
              hash |= 0; // Convert to 32bit integer
            }
            return hash;
          };
          // 是否是正序连续
          function isPositiveContinuous(str1, str2) {
            if (str2.hashCode() - str1.hashCode() == 1) return true;
            return false;
          }
          // 是否是反序连续
          function isReverseContinuous(str1, str2) {
            if (str2.hashCode() - str1.hashCode() == -1) return true;
            return false;
          }
          // 密码是否是正序或反序连续4位及以上
          function isPasswordContinuous(pwd) {
            let count = 0;// 正序次数
            let reverseCount = 0;// 反序次数
            const strArr = pwd.split('');
            for (let i = 0; i < strArr.length - 1; i++) { // 从1开始是因为划分数组时，第一个为空
              if (isPositiveContinuous(strArr[i], strArr[i + 1])) {
                count++;
              } else {
                count = 0;
              }
              if (isReverseContinuous(strArr[i], strArr[i + 1])) {
                reverseCount++;
              } else {
                reverseCount = 0;
              }
              if (count >= 2 || reverseCount >= 2) break;
            }
            if (count >= 2 || reverseCount >= 2) return false;
            return true
          }
          // 不能纯数字或字母
          function isAllNumOrStr(password) {
            const allNum = /^\d+$/;
            const allStr = /^[A-Za-z]+$/
            if (allNum.test(password) || allStr.test(password)) {
              return false;
            }
            return true;
          }
          // 账号密码相同
          function isAccNoLikePwd(accCount, password) {
            if (accCount == password) {
              return false
            }
            return true
          }
          const passwordContinuous = isPasswordContinuous(password)
          const allNumOrStr = isAllNumOrStr(password)
          const accNoLikePwd = isAccNoLikePwd(accCount, password)
          return [passwordContinuous, allNumOrStr, accNoLikePwd];
        },
        treeExpandOpen(key) {
          if (this.$data[key]) {
            return
          }
          this.$data[key] = true
          this.$data[`${key}Key`] = Math.random()
        },
        treeExpandClose(key) {
          if (!this.$data[key]) {
            return
          }
          this.$data[key] = false
          this.$data[`${key}Key`] = Math.random()
        },

        handleTabsClick(tab, event) { },
        deptChange() {
          this.$forceUpdate()
        },
        searchcasChange(data1) {
          if (data1.length > 0) {
            const node = this.$refs['cascaderRefs'].getCheckedNodes()
            node.forEach(m => {
              if (m.data.deptOrCompany === '公司') {
                this.searchForm.deptCode = m.data.companyCode
                this.searchForm.company = m.data.companyCode
              } else if (m.data.deptOrCompany === '部门') {
                this.searchForm.company = ''
                this.searchForm.deptCode = m.data.deptCode
              }
            })
          } else {
            this.searchForm.deptCode = ''
            this.searchForm.company = ''
          }
        },
        casChange1(data, add) {
          this.$nextTick(() => {
            const node = this.$refs['cascaderEdit'].getCheckedNodes()

            const name = node[0].data.deptOrCompany

            if (name == '部门') {
              this.editForm.company = node[0].data.companyId
              this.editForm.dept = data[data.length - 1]
            } else {
              this.deptId = ''
              return this.$message.warning('只能选择部门')
            }
          })
        },
        casChange2(data, add) {
          this.$nextTick(() => {
            const node = this.$refs['cascader'].getCheckedNodes()

            const name = node[0].data.deptOrCompany

            if (name == '部门') {
              this.addForm.company = node[0].data.companyId

              this.addForm.dept = data[data.length - 1]
            } else {
              this.addForm.deptId = ''
              return this.$message.warning('只能选择部门')
            }
          })
        },

        // 获取公司🌲
        async getcompTree() {
          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/publics/listcomdept`
          )
          if (res.data.code != '0000') {
            return this.$message.error(res.data.msg)
          }
          this.companyTree = this.getTreeData(res.data.data.treeNodeList)
        },
        // 递归判断列表，把最后的children设为undefined
        getTreeData(data) {
          for (var i = 0; i < data.length; i++) {
            if (data[i].children.length < 1) {
              // children若为空数组，则将children设为undefined
              data[i].children = undefined
            } else {
              // children若不为空数组，则继续 递归调用 本方法
              this.getTreeData(data[i].children)
            }
          }
          return data
        },
        // 根据公司ID获取部门信息
        async getDeptEdit(deptId) {
          this.editForm.dept = deptId

          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/sysdept/getdeptbycomp?compId=${this.editForm.company}`
          )
          if (res.data.code != '0000') {
            return this.$message.error(res.data.msg)
          }
          this.deptDataList = res.data.data
        },
        // 查询部门列表
        async getDeptAdd(deptId) {
          this.addForm.dept = deptId
          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/sysdept/getdeptbycomp?compId=${this.addForm.company}`
          )
          if (res.data.code != '0000') {
            return this.$message.error(res.data.msg)
          }
          this.deptAddList = res.data.data
        },
        // 根据公司ID获取部门信息
        async getDeptByCompany() {
          if (this.searchForm.company == '') return
          this.searchForm.department = ''
          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/sysdept/getdeptbycomp?compId=${this.searchForm.company}`
          )
          if (res.data.code != '0000') {
            return this.$message.error(res.data.msg)
          }
          this.deptData = res.data.data
        },
        // 岗位信息
        async getAllDeptPost() {
          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/sysdeptpost/selectall`
          )
          if (res.data.code != '0000') {
            return this.$message.error(res.data.msg)
          }
          this.deptPostData = res.data.data
        },

        // 新增
        increase() {
          this.editForm.id = ''
          this.inpDisable = false
          this.addDrawer = true
          this.deptId = ''
          this.getcompTree()
          this.getRoleTree('')
          this.$nextTick(() => {
            this.$refs.addFormRefs.resetFields()
          })
        },
        isMd(v) {
          // 修改密码就要进行加密处理
          this.passwordmd = true
        },
        // 编辑
        async handleEdit(index, info) {
          if (info.accNo == null) {
            this.activeName = 'second'
            this.editUserFlag = true
          } else {
            this.activeName = 'first'
            this.editPersonFlag = true
          }
          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/sysuser/querybyid?id=${info.id}`
          )
          if (res.data.success) {
            var row = res.data.data
          } else {
            var row = info
          }
          console.log(row);
          this.deptId = row.deptId
          this.getcompTree()
          this.inpDisable = true
          this.editForm = row
          this.editOrAdd = true
          if (this.$refs.userForm != undefined) this.$refs.userForm.resetFields()
          this.editForm.id = row.id
          this.editForm.delFlag = row.state
          this.editForm.email = row.email
          this.editForm.accNo = row.accNo
          this.editForm.userName = row.userName
          this.editForm.userNo = row.userNo
          this.editForm.cardType = row.cardType
          this.editForm.card = row.card
          this.editForm.company = row.companyId
          this.getDeptEdit(row.deptId)
          this.editForm.deptPost = row.deptPost
          this.editForm.userType = row.userType
          this.editForm.password = row.accPwd
          this.passwordmd = false
          this.getRoleTree(row.id)
        },
        // 新增劳务人员保存
        addPerson() {
          this.$refs['addForm'].validate(async valid => {
            if (valid) {
              const data = {
                userNo: this.addForm.userNo,
                userName: this.addForm.userName,
                card: this.addForm.card,
                cardType: this.addForm.cardType,
                companyId: this.addForm.company,
                deptId: this.addForm.dept,
                deptCode: this.addForm.dept,
                deptPost: this.addForm.deptPost,
                email: this.addForm.email,
                state: this.addForm.delFlag,
                userType: this.addForm.userType
              }
              const res = await this.$http.post(
                `/${this.$ServiceName}/api/external/sysuser/insertuserlabor`,
                data
              )
              if (res.data.code !== '0000') {
                return this.$message.error(res.data.msg)
              }

              this.$message.success(res.data.msg)
              this.$refs['addForm'].resetFields()
              this.addDrawer = false
              this.searchClick()
            } else {
              return false
            }
          })
        },
        // 密码加密方法
        encrypt(key, oldPwd) {
          const encrypt = new JSEncrypt();
          encrypt.setPublicKey(key);
          const encrypted = encrypt.encrypt(oldPwd);
          return encrypted;
        },
        // 新增用户信息
        addUser() {
          this.$refs.addFormRefs.validate(async valid => {
            if (valid) {
              const roleIds = this.$refs.addRuleTree.getCheckedKeys()
              if (roleIds.length == 0) {
                return this.$message.error('请选择角色！')
              }
              const [passwordContinuous, allNumOrStr, accNoLikePwd] = this.checkpassword(this.addForm.accNo, this.addForm.password)
              if (!passwordContinuous && !allNumOrStr) {
                const h = this.$createElement;
                return this.$message({
                  message: h('div', { style: { color: '#f56c6c' }}, [
                    h('div', null, `密码连续3位不能为字典序`),
                    h('div', null, `密码不能为纯数字或纯字母`)
                  ]),
                  type: 'error'
                });
              }
              if (!passwordContinuous) {
                return this.$message.error('密码连续3位不能为字典序')
              }
              if (!allNumOrStr) {
                return this.$message.error('密码不能为纯数字或纯字母')
              }
              if (!accNoLikePwd) {
                return this.$message.error('密码不能和账号相同')
              }
              var data = {
                accNo: this.addForm.accNo,
                userNo: this.addForm.userNo,
                userName: this.addForm.userName,
                card: this.addForm.card,
                cardType: this.addForm.cardType,
                companyId: this.addForm.company,
                deptId: this.addForm.dept,
                deptCode: this.addForm.dept,
                deptPost: this.addForm.deptPost,
                email: this.addForm.email,
                state: this.addForm.delFlag,
                roleIds: roleIds,
                userType: this.addForm.userType
              }
              data.accPwd = this.encrypt(this.publicKey, this.addForm.password)

              const res = await this.$http.post(
                `/${this.$ServiceName}/api/external/sysuser/insert`,
                data
              )
              if (res.data.code != '0000') {
                return this.$message.error(res.data.msg)
              }
              this.$message.success(res.data.msg)
              this.getUserDataList()
              this.getcompTree()
              this.addDrawer = false
            } else {
              return false
            }
          })
        },
        editPersonSave() {
          this.$refs['userForm'].validate(async valid => {
            if (valid) {
              var data = {
                userName: this.editForm.userName,
                card: this.editForm.card,
                cardType: this.editForm.cardType,
                companyId: this.editForm.company,
                deptId: this.editForm.dept,
                deptCode: this.editForm.dept,
                deptPost: this.editForm.deptPost,
                email: this.editForm.email,
                state: this.editForm.delFlag,
                // roleIds: this.$refs.ruleTree.getCheckedKeys(),
                userType: this.editForm.userType,
                id: this.editForm.id
              }
              const res = await this.$http.put(
                `/${this.$ServiceName}/api/external/sysuser/updateuserlabor`,
                data
              )
              if (res.data.code != '0000') {
                return this.$message.error(res.data.msg)
              }
              this.$message.success(res.data.msg)
              this.getUserDataList()
              this.editOrAdd = false
            } else {
              return false
            }
          })
        },
        // 修改用户信息保存
        enterUser() {
          this.$refs['userForm'].validate(async valid => {
            if (valid) {
              // 修改了密码再校验
              if (this.passwordmd) {
                const [passwordContinuous, allNumOrStr, accNoLikePwd] = this.checkpassword(this.editForm.accNo, this.editForm.password)
                if (!passwordContinuous && !allNumOrStr) {
                  const h = this.$createElement;
                  return this.$message({
                    message: h('div', { style: { color: '#f56c6c' }}, [
                      h('div', null, `密码连续3位不能为字典序`),
                      h('div', null, `密码不能为纯数字或纯字母`)
                    ]),
                    type: 'error'
                  });
                }
                if (!passwordContinuous) {
                  return this.$message.error('密码连续3位不能为字典序')
                }
                if (!allNumOrStr) {
                  return this.$message.error('密码不能为纯数字或纯字母')
                }
                if (!accNoLikePwd) {
                  return this.$message.error('密码不能和账号相同')
                }
                if (this.editForm.password.length < 6) {
                  return this.$message.error('密码长度不能少于6位')
                }
              }
              var data = {
                accNo: this.editForm.accNo,
                userNo: this.editForm.userNo,
                userName: this.editForm.userName,
                card: this.editForm.card,
                cardType: this.editForm.cardType,
                companyId: this.editForm.company,
                deptId: this.editForm.dept,
                deptCode: this.editForm.dept,
                deptPost: this.editForm.deptPost,
                email: this.editForm.email,
                state: this.editForm.delFlag,
                roleIds: this.$refs.ruleTree.getCheckedKeys(),
                userType: this.editForm.userType
              }
              if (this.editForm.password.trim().length > 0) {
                if (this.passwordmd) {
                  // true 加密
                  data.accPwd = this.$md5(this.editForm.password)
                } else {
                  // 修改要加密 不修改不加密false
                  data.accPwd = this.editForm.password
                }

                if (this.editForm.id != null && this.editForm.id.length > 0) {
                  data.id = this.editForm.id
                  const res = await this.$http.put(
                    `/${this.$ServiceName}/api/external/sysuser/update`,
                    data
                  )
                  if (res.data.code != '0000') {
                    return this.$message.error(res.data.msg)
                  }
                  this.$message.success(res.data.msg)
                  this.editOrAdd = false
                  this.getUserDataList()
                }
              } else {
                this.$message.warning('密码不能为空')
              }
            } else {
              return false
            }
          })
        },
        // 搜索
        async searchClick() {
          this.queryInfo.page = 1
          this.getUserDataList()
        },
        // 获取用户table信息
        async getUserDataList() {
          this.loading = true
          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/sysuser/selectbypage?startpage=${this.queryInfo.page}&pagesize=${this.queryInfo.pagesize}`,
            { params: this.searchForm }
          )
          if (res.data.code != '0000') {
            this.loading = false
            return this.$message.error(res.data.msg)
          }
          this.cargotableData = res.data.data.pages
          this.queryInfo.totalNum = res.data.data.totalNum
          this.queryInfo.page = res.data.data.pageNum
          this.queryInfo.pagesize = res.data.data.pageSize
          this.loading = false
        },

        // 根据id删除用户角色
        async deleteUserInfo(row) {
          const res = await this.$http.delete(
            `/${this.$ServiceName}/api/external/sysuser/deletebyuserno?id=${row.id}`
          )
          if (res.data.code != '0000') {
            return this.$message.error(res.data.msg)
          }
          this.$message.success(res.data.msg)
          this.getUserDataList()
        },
        closedrawer() {
          this.editOrAdd = false
        },
        // 每页显示的条数
        handleSizeChange(val) {
          this.queryInfo.pagesize = val
          this.getUserDataList()
        },
        handleClose(done) {
          let oldV = {}
          let newV = {}
          if (this.editOrAdd) {
            oldV = this.oldValA
            newV = {
              'editForm': this.editForm,
              'defkey': this.defkey
            }
          }
          if (this.addDrawer) {
            oldV = this.oldValB
            newV = {
              'addForm': this.addForm,
              'defkey': this.defkey
            }
          }
          if (!Utils.compareData(oldV, newV)) {
            this.$confirm('修改的数据未保存，是否关闭？')
              .then(_ => {
                done()
              })
              .catch(_ => { })
          } else {
            done()
          }
        },
        // 当前页
        handleCurrentChange(val) {
          this.queryInfo.startpage = val
          this.getUserDataList()
        },
        // 获取角色树
        async getRoleTree(userId) {
          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/sysuser/getroletree?userId=${userId}`
          )
          if (res.data.code != '0000') {
            return this.$message.error(res.data.msg)
          }
          this.rightsList = res.data.data.treeNodeList
          this.defkey = res.data.data.selectedNode
          this.oldValA = {
            'editForm': JSON.parse(JSON.stringify(this.editForm)),
            'defkey': JSON.parse(JSON.stringify(this.defkey))
          }
          this.oldValB = {
            'addForm': JSON.parse(JSON.stringify(this.addForm)),
            'defkey': JSON.parse(JSON.stringify(this.defkey))
          }
        },
        cellStyle() {
          return 'border-left: none;border-right: none;'
        },
        // 查询公司列表
        // async getCompList() {
        //     const res = await this.$http.get(
        //         `/${this.$ServiceName}/api/external/publics/listworkcompany`
        //     )
        //     if (res.data.code != '0000') {
        //         return this.$message.error(res.data.msg)
        //     }
        //     this.companyData = res.data.data
        // },
        async getUserList() {
          await this.$http.get(
            `/${this.$ServiceName}/api/external/publics/listalldict?dicttype=LABOUR_TYPE,CARD_TYPE`
          ).then(res => {
            this.userTypeList = res.data.data.LABOUR_TYPE
            this.cardTypeData = res.data.data.CARD_TYPE
          }).catch(error => { })
        },
        // //证件类型列表
        // async getCardList() {
        //   const res = await this.$http.get(
        //     `/${this.$ServiceName}/api/external/public/listdict?dicttype=CARD_TYPE`
        //   )
        //   if (res.data.code != '0000') {
        //     return this.$message.error(res.data.msg)
        //   }
        //   this.cardTypeData = res.data.data.CARD_TYPE
        // },
        // 删除提示
        async handleDelete(row) {
          const confirmRes = await this.$confirm(
            '此操作将永久删除该数据, 是否继续?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).catch(err => {})
          if (confirmRes !== 'confirm') {
            return this.$message.info('已经取消删除')
          }
          this.deleteUserInfo(row)
        }
      },
      mounted() {
        // this.getDeptList()
        this.popoverWidth = this.$refs.searchCard.offsetWidth
      },
      async activated() {
        var menuArr = []
        var menuId = ''
        if (localStorage.getItem('menuArr')) {
          menuArr = JSON.parse(localStorage.getItem('menuArr'))
        }
        menuArr.map(item => {
          item.children.map(v => {
            if (window.location.href.includes(v.url)) {
              menuId = v.id
            }
          })
        })

        if (menuId) {
          this.menuArr = []
          await this.$http.get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`, { timeout: 30000 })
            .then(res => {
              res.data.data.map(item => {
                this.menuArr.push(item.RESOURCENAME)
              })
            }).catch((error) => { })
        }
        if (this.$store.state.app.searchResouce == 'menu') {
          this.searchForm = {
            userName: '',
            deptCode: ''
          }
          this.popoverWidth = this.$refs.searchCard.offsetWidth
          this.getcompTree()
          // 查询公司列表
          // this.getCompList()
          // 证件类型列表
          // this.getCardList()
          this.getUserList()
          this.getAllDeptPost()
          this.getUserDataList()
        }
      }
    }
</script>

<style lang="less" scoped>
    /deep/.el-table {
        max-height: none !important;
    }

    /deep/.el-tabs__item:focus.is-active.is-focus:not(:active) {
        box-shadow: none !important;
    }
    /deep/.el-tabs__nav-wrap {
        padding: 0 20px;
        box-sizing: border-box;
    }
    /deep/.el-drawer__body > * {
        height: 100%;
    }
    .down_box {
        height: 50px;
        width: 100%;
        background-color: #fff;
    }
    .userBtn {
        z-index: 100;
        text-align: right;
        padding-right: 20px;
        border-top: 1px solid #c8cfde;
        background-color: #f5f7fa;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 50px;
    }
    /deep/ .el-button--primary {
        background-color: #338ce8;
        border-color: #338ce8;
    }
    /deep/.el-tabs__content {
        position: initial !important;
    }
    .top {
        height: 80px;
    }
    .top2 {
        height: 30px;
    }
    /deep/ .el-collapse-item__header {
        background: #f5f7fa;
    }
    /deep/ .el-table thead {
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: #606266;
    }
    /deep/ #el-drawer__title {
        background: #f5f7fa;
    }
    #fiefooter /deep/ .el-select {
        width: 100%;
    }
    .yesgoods /deep/ .el-drawer__body {
        padding-top: 0;
    }
    .yesgoods .anniu {
        text-align: right;
        padding: 10px 20px 10px;
    }

    /deep/ .el-button + .el-button {
        margin-left: 0;
    }
    /deep/ .el-drawer__header {
        // margin-bottom: 12px;
        height: 40px;
        line-height: 41px;
        padding: 0 16px;
        box-sizing: border-box;
        border-bottom: 1px solid gainsboro;
        margin-bottom: 0;
    }

    /deep/ .el-drawer__open .el-drawer.rtl {
        background: #f5f7fa;
    }

    /deep/ .el-drawer__body {
        overflow-y: auto;
        padding-bottom: 50px;
    }
    /deep/.el-pagination.is-background .btn-next,
    /deep/ .el-pagination.is-background .btn-prev,
    /deep/ .el-pagination.is-background .el-pager li {
        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-radius: 3px;
        border-radius: 3px;
    }

    /deep/ .el-collapse-item__header {
        padding-left: 19px;
        font-size: 16px;
    }
    /deep/ .el-breadcrumb {
        font-size: 16px;
    }
    /* 第一行居中 */
    .el-table td:first-child,
    el-table th:first-child,
    .el-table td:last-child,
    el-table th:last-child {
        text-align: center !important;
    }

    .container {
        .form_card {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        /deep/.el-card__body {
            width: 100%;
            padding: 0;
            border-radius: 0;
        }
        .page {
            background: #ffffff;
            text-align: right;
            border-radius: 0 0 4px 4px;
            padding: 5px 20px;
        }

        .editBtn,
        .deleteBtn {
            color: #1684f6;
            border-color: transparent;
            background: transparent;
        }
        //分页
        .card_pagination {
            text-align: right;
        }
        .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
            white-space: nowrap;
        }
    }
    .el-table {
        margin-bottom: 0 !important;
    }
    .el-table td {
        padding: 10px 0;
        text-align: left;
    }

    .form_item {
        margin-top: 20px;
    }
    .delete-button {
        border: none;
        background-color: transparent;
    }
    /deep/ .el-po {
        margin-right: 10000px;
    }
    .btn /deep/ .el-button--mini,
    .el-button--mini.is-round {
        padding: 7px 6px;
    }
    // 查询表单start
    .search_form {
        background-color: #fff;
        color: #303133;
        border-radius: 4px;
        font-size: 14px;
        color: #606266;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;

        /deep/.el-input {
            width: 150px;
        }
    }
    .box {
        border: 1px solid #e1e4eb;
        border-radius: 4px 4px 0 0;
        border-top: none;
    }
    /deep/ .el-tree {
        overflow-y: scroll;
        height: calc(100vh - 180px);
    }
    .expandClass {
        margin: 0 10px;
    }
</style>

